<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;margin-left: 80rpx;">
				{{$t('my.titleChat')}}
			</view>
			<view class="menu-btn" @click="readAll">
				{{$t('my.titleNoticeReadAll')}}
			</view>
		</view>
		<view style="width: 100%;background-color: #FFF;border-radius: 80rpx 80rpx 0 0;margin-top: 32rpx;min-height: 100vh;">
			<view style="display: flex; justify-content: space-between;padding: 32rpx 40rpx 16rpx;">
				<view v-for="(item, index) in typeList" :key="index" style="display: flex;justify-content: flex-start;align-items: center;">
					<view :class="{'type-item-active':type==item.name,'type-item':type!=item.name}" @click="changeType(item.name)">
						{{item.title}}
					</view>
					<view class="red-bag" v-if="item.unRead>0">{{item.unRead}}</view>
				</view>
			</view>
			<view class="card-list">
				
				<view style="padding: 24rpx;">
					<u-swipe-action>
						
							<u-swipe-action-item
									:options="options2" 
									v-for="(item, index) in orderList"
									:key="index"
									:name="index"
									:ref="'swipeAction' + index"
									@click="handleDelete"
									style="border-bottom:2rpx solid #F6F8FA;"
							>
								<view class="order-card" @click="goTalk(item.id)">
									<view class="card-left">
										<view style="display: flex;justify-content: center;align-items: center;position: relative;">
											<u-image
												:src="item.avatar"
												width="84rpx"
												height="84rpx"
												radius="50%"
											></u-image>
											<view 
												v-if="item.unReadNum > 0" 
												class="unread-badge"
												:class="{'unread-badge-small': item.unReadNum > 99}"
											>
												{{ item.unReadNum > 99 ? '99+' : item.unReadNum }}
											</view>
										</view>
										<view style="margin-left: 20rpx;">
											<view class="" style="color: #020202;font-size: 28rpx;">{{item.nickname}}</view>
											<view style="color: #232426;font-size: 24rpx;max-width: 400rpx;overflow: hidden;text-overflow: ellipsis;">{{item.lastMessage}}</view>
										</view>
									</view>
									<view>
										<view style="color: #BEC0C5;font-size: 20rpx;">{{ item.created_at }}</view>
									</view>
								</view>
							</u-swipe-action-item>
						
					</u-swipe-action>
				</view>
				
			</view>
		</view>
		<u-modal 
			:show="showModal" 
			:showCancelButton="true"
			title="刪除此訊息" 
			content='刪除后,所有聊天記錄將被清除'
			@confirm="enterDelFn"
			@cancel="cancelDelFn"
			@close="cancelDelFn"
		></u-modal>
	</view>
</template>

<script>
	import uSwipeAction from '@/uni_modules/uview-ui/components/u-swipe-action/u-swipe-action.vue';
	import { getChatRoomList, readAllChat, delChat } from '@/config/api.js';
	
	export default {
		data() {
			return {
				type:'community',
				typeList:[{
					id:1,
					name:'community',
					title:'社群私訊',
					unRead:0
				},{
					id:2,
					name:'expert',
					title:'達人訂單',
					unRead:0
				},{
					id:3,
					name:'task',
					title:'任務詢問',
					unRead:0
				}],
				number:0,
				pages:1,
				limit:10,
				orderList:[],
				listData:{},
				options2: [{
					text: '檢舉',
					style: {
						backgroundColor: '#FFA514',
					}
				}, {
					text: '刪除',
					style: {
						backgroundColor: '#FF3D43'
					}
				}],
				showModal:false,
				titleModal:'',
				contentModal:'',
				delId:0
			}
		},
		onLoad(option) {
			
		},
		onShow(){
			this.getChatRoomListFn();
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			changeType(type){
				this.type = type;
				this.orderList = this.listData[type].list
			},
			getChatRoomListFn(){
				let that = this;
				uni.showLoading({
					title:'loading...'
				})
				
				getChatRoomList().then((res) => {
					//success
					that.setData(res)
					uni.hideLoading()
					
				}).catch(() =>{
					
				})
			},
			setData(data){
				this.listData['community'] = data.community
				this.listData['expert']    = data.expert
				this.listData['task']      = data.task
				
				this.orderList = this.listData[this.type].list
				// typeList[0].unRead = data.community.unReadNumCount
				// typeList[1].unRead = data.expert.unReadNumCount
				// typeList[2].unRead = data.task.unReadNumCount
				this.$set(this.typeList[0], 'unRead', data.community.unReadNumCount)
				this.$set(this.typeList[1], 'unRead', data.expert.unReadNumCount)
				this.$set(this.typeList[2], 'unRead', data.task.unReadNumCount)
			},
			//全部已讀
			readAll(){
				let that = this;
				readAllChat().then((res) => {
					//success
					console.log(res)
					if(res == 'success'){
						uni.showToast({
							icon:'none',
							title:'操作成功'
						})
					} else {
						uni.showToast({
							icon:'none',
							title:res
						})
					}
					that.getChatRoomListFn();
				}).catch(() =>{
					
				})
			},
			goTalk(id){
				uni.navigateTo({
					url:'/pages/my/chatTalk?roomId='+id
				})
			},
			handleDelete(e){
				console.log(e)
				if( e.index == 0 ){
					//檢舉
				} else {
					//刪除
					this.delId = e.name;
					this.showModal = true;
					// this.removeRoom(e.name)
				}
			},
			cancelDelFn(){
				this.delId = 0;
				this.showModal = false;
			},
			enterDelFn(){
				console.log('確認')
				this.removeRoom()
			},
			removeRoom(){
				//
				let that  = this;
				let index = this.delId;
				
				let parames = {
					chat_room_id:this.orderList[index].id
				}
				
				delChat(parames).then((res) => {
					//success
					that.delId = 0;
					that.showModal = false;
					that.getChatRoomListFn();
					uni.showToast({
						icon:'none',
						title:'操作成功'
					})
					
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #EEF7FD;
		min-height: 100vh;
		
		.menu-btn{
			color: #232426;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
		.type-item{
			color: #808690;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
		.type-item-active{
			color: #232426;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			border-bottom: 4rpx solid #232426;
			font-weight: 600;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
		.red-bag{
			background-color: red;
			color: #FFF;
			padding: 4rpx 12rpx;
			font-size: 24rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 30rpx;
		}
		.fifter-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #E5E6E8;
			padding: 12rpx 24rpx;
			border-radius: 12rpx;
			margin-left: 8rpx;
			
			.fifter-title{
				margin-left: 12rpx;
				font-size: 28rpx;
			}
		}
		
		.order-card{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin: 16rpx 0;
			
			padding: 12rpx 0;
			
			.card-left{
				display: flex;
				justify-content: flex-start;
			}
		}
		
		/* 穿透uView组件作用域 */
		::v-deep .u-swipe-action-item__content { 
			width: 100%;
			
			.order-card{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin: 16rpx 0;
				
				.card-left{
					display: flex;
					justify-content: flex-start;
				}
			}
		} 
		
		/* 穿透uView组件作用域 */
		::v-deep .u-swipe-action-item__right { 
			padding: 2rpx;
		} 
		
		// .swipe-action {
		// 	&__content {
		// 		 padding: 25rpx 0;
		
		// 		&__text {
		// 			 font-size: 15px;
		// 			 color: $u-main-color;
		// 			 padding-left: 30rpx;
		// 		 }
		// 	}
		// }
		.system-title{
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #323438;
			margin-top: 68rpx;
			font-weight: 500;
		}
		.system-text{
			padding: 40rpx;
		}
		
		.unread-badge {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			background-color: #FF3D43;
			color: #FFFFFF;
			border-radius: 20rpx;
			min-width: 32rpx;
			height: 32rpx;
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 8rpx;
			border: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			z-index: 10;
		}
		
		.unread-badge-small {
			font-size: 18rpx;
			padding: 0 6rpx;
			min-width: 40rpx;
		}
	}
	
</style>
